<template>
    <basic-layout class="walletBox" title="我的钱包" :showAddBtn="false">
        <div class="bodyBox">
            <ul v-show="isCard">
                <li v-for="(item,i) in cardList" :key="i" @click="isShow(item)">
                    <div class="topName">
                        <div> {{item.cardName}} </div>
                        <div v-if="item.isDefault === '1'"> 默认 </div>
                    </div>
                    <van-divider />
                    <div class="botBox">
                        <span>{{item.cardNo}}</span>
                        <br />
                        <span>设置默认卡、查余额、查交易记录</span>
                    </div>
                </li>
            </ul>
            <van-empty v-show="!isCard" class="custom-image" description="暂无数据"
                :image="require('@/assets/images/empty.png')" />
        </div>
        <div class="btnBox">
            <van-button round type="info" block @click="isSync" :disabled="isEnd">同步卡信息</van-button>
        </div>
    </basic-layout>
</template>

<script>
    import { getCardWrap, syncCardNum } from "@/api/platframe/wallet/cardManage";

    export default {
        props: {},
        components: {},
        data() {
            return {
                cardList: [],
                isCard: false, // 是否有“卡”数据
                isEnd: false, // 接口结束
            };
        },
        created() {
            this.cardWrap();
        },
        computed: {},
        mounted() {},
        watch: {},
        methods: {
            // 获取卡
            cardWrap() {
                getCardWrap().then((res) => {
                    if (res.code === 1000) {
                        this.cardList = res.data;
                        if (res.data.length > 0) {
                            this.isCard = true;
                        } else {
                            this.isCard = false;
                        }
                    }
                });
            },
            // 同步操作
            isSync() {
                if (this.isEnd) return;
                this.isEnd = true;
                syncCardNum().then((res) => {
                    this.isEnd = false;
                    if (res.code === 1000) {
                        this.cardWrap();
                    }
                });
            },
            // 进入详情页
            isShow(e) {
                this.$router.push({ path: `/wallet/details?params=${JSON.stringify(e)}`});
            },
        },
    };
</script>

<style scoped lang="less">
.walletBox ::v-deep .content {
    background-color: #ebebeb;
}
    .bodyBox {
        height: calc(100% - 70px);
        margin-bottom: 20px;
        overflow: auto;
        ul {
            margin: 10px 16px;
        }
        li {
            padding: 5px 8px;
            margin-bottom: 8px;
            color: #f4feff;
            background-image: linear-gradient( to right bottom,#4c7dfe,#4c7dfe, #34abef, #20d7df  );
            border-radius: 10px;
            .topName {
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                font-weight: bold;
                height: 32px;
                line-height: 32px;
            }
            .van-divider {
                margin-bottom: 6px;
            }
            .botBox {
                overflow: hidden;
                color: #cddff5;
                margin: 0 0 24px;
                span {
                    display: inline-block;
                    height: 24px;
                    line-height: 24px;
                }
                span:nth-child(1) {
                    font-size: 14px;
                }
            }
        }
    }

    .btnBox {
        padding: 0px 16px;
    }
</style>